<!--  -->
<template>
  <footer>
    <ul class="footer">
      <li :class="{ on: '/index' === $route.path }" @click="switchPath(`index`)">
        <p>监测预警</p>
      </li>
      <!-- <li :class="{ on: '/hiddenDangerManager' === $route.path }" @click="switchPath(`hiddenDangerManager`)">
        <p>隐患管理</p>
      </li> -->
      <li :class="{ on: '/analyseReport' === $route.path }" @click="switchPath(`analyseReport`)">
        <p>分析报告</p>
      </li>
      <li
        :class="{ on: '/personamCenter' === $route.path }"
        @click="switchPath(`personamCenter`)"
      >
        <p>个人中心</p>
      </li>
    </ul>
  </footer>
</template>

<script>
export default {
  methods: {
    switchPath(pathUrl) {
      if (this.$route.name !== pathUrl) {
        this.$router.replace({ name: pathUrl });
      }
    }
  }
};
</script>
<style lang="stylus" scope>
footer {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
}

_backSize(wid) {
  background-size: wid;
}

.footer {
  display: flex;
  flex-direction: row;
  height: 0.98rem;
  border-top: #c3c5ca 1px solid;
  background: #fff;

  li {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    i {
      font-size: 0.45rem;
      color: #99a1ad;
    }

    p {
      font-size: 0.2rem;
      color: #99a1ad;
      padding-top: 27px;
    }

    &.on {
      p {
        color: #428ee4;
      }
    }

    &:nth-child(1) {
      background: url('../assets/images/nav1.png') no-repeat center 5px;
      _backSize(10%);

      &.on {
        background: url('../assets/images/nav1_active.png') no-repeat center 5px;
        _backSize(10%);
      }
    }

    &:nth-child(2) {
      background: url('../assets/images/nav2.png') no-repeat center 5px;
      _backSize(10%);

      &.on {
        background: url('../assets/images/nav2_active.png') no-repeat center 5px;
        _backSize(10%);
      }
    }

    &:nth-child(3) {
      background: url('../assets/images/nav3.png') no-repeat center 5px;
      _backSize(10%);

      &.on {
        background: url('../assets/images/nav3_active.png') no-repeat center 5px;
        _backSize(10%);
      }
    }

    &:nth-child(4) {
      background: url('../assets/images/nav4.png') no-repeat center 5px;
      _backSize(10%);

      &.on {
        background: url('../assets/images/nav4_active.png') no-repeat center 5px;
        _backSize(10%);
      }
    }
  }
}
</style>
